<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <button @click="changeMessage">改变message的值</button>
            <cpn :movies="movies" :message="message"></cpn>
        </div>
        <template id="cpn">
            <div>
                <div>{{movies}}</div>
                <div>{{message}}</div>
             </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>

            /**
                ## 如何修改父组件传过来的值？
                    1. 父组件传到props中的值，不推荐直接修改它
                    2. 正确方式是：在data里定义一个变量，用props中的值初始化data里的变量，再去修改data变量的值
                    3. props的值只用于父传给子，不要自己修改它
                    4. 下面举一个栗子
                        e.g.
                        ```
                        prprs:['age']
                        data() {
                            dage: this.age
                        }
                        ```
            */

            const cpn = {
                template: '#cpn',
                // 使用数组的形式
                // props: ['movies', 'message'],
                // 使用对象的形式
                props: {
                    //1. 类型限制
                    movies: Array,
                    message: String,

                    // 2. 提供一些默认值
                    message2: {
                        type: String,
                        default: 'aaaaa',
                        required: true //表示必须给这个属性赋值
                    },
                    movies: {
                        type: Array,
                        default() { //数组的默认值必须是一个函数
                            return []
                        }
                    }
                },
                data() {
                    return {
                        
                    }
                },
            }

            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊',
                    movies: ['海王', '海贼王', '海尔兄弟']
                },
                components: {
                    cpn
                },
                methods: {
                    changeMessage() {
                        this.message = '已经改变 了'
                    }
                },
            })
        </script>
    </body>
</html>